<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
   <meta name="viewport" content="width=device-width,initial-scalable=1,user-scalable=no">
    <style>
        html,body{
            height: 100vh;
            margin: 0px;
            /*径向渐变:成一个圆形扩散的形式把所填写的颜色过度出来*/
            background:radial-gradient( 60% 55%,deeppink 20%,gold 30%,lawngreen);
        }
        body{
            /*改body的布局展示样式为弹性布局
            弹性布局:支持不同分辨率使用同一套代码*/
            display: flex;
            /*主轴对其方式*/
            justify-content: center;
            /*交叉轴对齐方式*/
            align-items: center;
            /*Ctrl+shift+m进入开发者模式*/
            perspective: 1500px;
        }
        main
        {
            width: 50vw;
            height: 50vw;
            /*切换成3d视角*/
            transform-style: preserve-3d;
            /*时间 动画名称 匀速 重复*/
            animation: 10s spin linear infinite;
        }
        main div
        {
            position: absolute;
            width: 50vw;
            height: 50vw;
            /*写一个值代表默认宽高都使用*/
            background-size: 100%;
            border: 1px solid white;
        }
        /*旋转的动画*/
        @keyframes spin
        {
            0%{
                transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateZ(360deg) rotateY(360deg);
            }
        }
        /*前面*/
        .font{
            background-image: url(img-cube/22.JPEG);
             background-size: 100%;
            /*在z轴上前进150px  150px正好是矩形一半的宽高*/
            transform: translateZ(25vw);
        }
         /*后面*/
        .back{
            background-image: url(img-cube/11.JPEG);
             background-size: 100%;
            /*在z轴上前进150px  150px正好是矩形一半的宽高*/
            transform: translateZ(-25vw);
        }
        .left
        {
          background-image: url(img-cube/33.jpg);  
          transform: rotateY(90deg) translateZ(-25vw);
           background-size: 100%;
        }
        .right
        {
            background-image: url(img-cube/44.jpg); 
            background-size: 100%;
            transform: rotateY(-90deg) translateZ(-25vw);
        }
        .top
        {
            background-image: url(img-cube/66.jpg); 
             background-size: 100%; 
            transform: rotateX(90deg) translateZ(-25vw);
        }
         .bottom
        {
            background-image: url(img-cube/55.jpg); 
             background-size: 100%; 
            transform: rotateX(-90deg) translateZ(-25vw);
        }
    </style>
</head>
<body>
    <main>
        <!--前-->
        <div class="font"></div>
        <!--后-->
        <div class="back"></div>
        <!--左-->
        <div class="left"></div>
        <!--右-->
        <div class="right"></div>
        <!--上-->
        <div class="top"></div>
        <!--下-->
        <div class="bottom"></div>
    </main>
</body>
</html>